jQuery(function ($) {
    window.ContentList = Spine.Controller.create({
        elements: {
            ".path": "path",            
            ".contentList": "contentList",
            ".hierarchyTree" : "hierarchyTree",
            ".workIndicator": "workIndicator",
            "#parent": "parent",
        },

        events: {
            "change .path": "pathchange",
            "click .search": "gosearch",
            "click #refresh": "gorefresh",
            "click #parent" : "goparent"
        },

        proxied: ["pathchange", "gosearch", "gorefresh", "goparent"],

        pathchange: function (e) {
            console.log("pathchange");
        },

        dosearch : function (refresh) {        
            var dirPath = this.path.val();
            window.location.hash = dirPath;
            this.entryList = Cofe.Models.EntryList.select(function (el) { return el.id == dirPath; });
            
            this.workIndicator.hide();
            this.contentList.show();
            if (dirPath.lastIndexOf("/") == -1)
                this.parent.hide();
                else this.parent.show();


            if (!this.entryList || this.entryList.length == 0 || refresh) {
                
                this.entryList = Cofe.Models.EntryList.init({ path : dirPath });
                this.entryList.bind("fetched", this.proxy(function (elist) {
                    elist.save();                    
                    this.render();

                    this.workIndicator.hide();
                    this.contentList.show();
                    
                }));
                this.entryList.bind("ajaxError", this.proxy(function (xhr, s, e) {
                    window.alert('error when fetching')
                }));

                this.workIndicator.show();
                this.contentList.hide();
                this.entryList.fetch();
            }
            else {
                this.render();
            }
        },

        init: function () {
            Cofe.Models.EntryList.fetch();
            this.workIndicator.hide();

            if (window.location.hash != ""){
                this.path.val(decodeURI(window.location.hash.slice(1)));                
            }      
            this.dosearch(false);
            $(window).bind("hashchange", this.proxy(function(event) {
                this.path.val(decodeURI(window.location.hash.slice(1)));
                this.dosearch(false);
            }));
        },

        gosearch: function (e) {
        console.log("search");
            this.dosearch(false);
        },

        gorefresh: function (e) {
        console.log("refresh");
            this.dosearch(true);
        },

        buildHierarchyTree : function() { 
            var hierarchy = new Array();
            var hierarchyIdx = 0;
            var path = this.path.val();            

            var idx = path.lastIndexOf("/");
            while (idx != -1) {
                var curLabel = path.substring(idx+1, path.length);
                hierarchy[hierarchyIdx++] = { label : curLabel, path : path, last : false };
                path = path.substring(0, idx);
                idx = path.lastIndexOf("/");
            }
            hierarchy[hierarchyIdx++] = { label : path, path : path, last : false };
            
            hierarchy[0].last = true;
            return hierarchy.reverse();
        },

        goparent: function(e) {
            var idx = this.path.val().lastIndexOf("/");
            if (idx != -1){
                this.path.val(this.path.val().substring(0, idx)); //substring(from, to) not (from, length)
            }            
            this.dosearch(false);
        },

        render: function (e) {            
           this.hierarchyTree.html($("#hierarchyTreeTemplate").tmpl(this.buildHierarchyTree()));
           this.contentList.html($("#contentListTemplate").tmpl(this.entryList));
        }


    });
})